<template>
  <div class="demo-container">
    <h1>图片轮播器示例</h1>

    <!-- 基础轮播器 -->
    <section class="demo-section">
      <h2>基础轮播器</h2>
      <ImageCarousel
        :images="basicImages"
        height="300px"
        @change="handleCarouselChange"
      />
    </section>

    <!-- 带缩略图的轮播器 -->
    <section class="demo-section">
      <h2>带缩略图的轮播器</h2>
      <ImageCarousel
        :images="thumbnailImages"
        :show-thumbnails="true"
        :show-indicators="false"
        height="400px"
      />
    </section>

    <!-- 手动控制轮播器 -->
    <section class="demo-section">
      <h2>手动控制轮播器</h2>
      <ImageCarousel
        ref="manualCarousel"
        :images="manualImages"
        :auto-play="false"
        height="350px"
      />
      <div class="manual-controls">
        <button @click="manualPrev">上一张</button>
        <button @click="manualNext">下一张</button>
        <button @click="manualGoTo(2)">跳转到第3张</button>
        <button @click="toggleAutoPlay">{{ isAutoPlaying ? '停止' : '开始' }}自动播放</button>
      </div>
    </section>
  </div>
</template>

<script setup>
import ImageCarousel from '@/components/common/Swiper/ImageCarousel.vue'

// 轮播器引用
const manualCarousel = ref(null)
const isAutoPlaying = ref(false)

// 基础图片数据
const basicImages = ref([
  {
    url: 'https://picsum.photos/800/400?random=1',
    alt: '随机图片1',
    title: '美丽风景',
    caption: '这是一张美丽的风景图片'
  },
  {
    url: 'https://picsum.photos/800/400?random=2',
    alt: '随机图片2',
    title: '城市夜景',
    caption: '繁华的城市夜景'
  },
  {
    url: 'https://picsum.photos/800/400?random=3',
    alt: '随机图片3',
    title: '自然风光',
    caption: '大自然的鬼斧神工'
  }
])

// 带缩略图的图片数据
const thumbnailImages = ref([
  {
    url: 'https://picsum.photos/800/400?random=4',
    thumbnail: 'https://picsum.photos/100/60?random=4',
    alt: '图片4'
  },
  {
    url: 'https://picsum.photos/800/400?random=5',
    thumbnail: 'https://picsum.photos/100/60?random=5',
    alt: '图片5'
  },
  {
    url: 'https://picsum.photos/800/400?random=6',
    thumbnail: 'https://picsum.photos/100/60?random=6',
    alt: '图片6'
  },
  {
    url: 'https://picsum.photos/800/400?random=7',
    thumbnail: 'https://picsum.photos/100/60?random=7',
    alt: '图片7'
  }
])

// 手动控制图片数据
const manualImages = ref([
  {
    url: 'https://picsum.photos/800/400?random=8',
    alt: '手动控制图片1'
  },
  {
    url: 'https://picsum.photos/800/400?random=9',
    alt: '手动控制图片2'
  },
  {
    url: 'https://picsum.photos/800/400?random=10',
    alt: '手动控制图片3'
  }
])

// 事件处理
const handleCarouselChange = (data) => {
  console.log('轮播器切换:', data)
}

// 手动控制方法
const manualPrev = () => {
  manualCarousel.value?.prevSlide()
}

const manualNext = () => {
  manualCarousel.value?.nextSlide()
}

const manualGoTo = (index) => {
  manualCarousel.value?.goToSlide(index)
}

const toggleAutoPlay = () => {
  if (isAutoPlaying.value) {
    manualCarousel.value?.stopAutoPlay()
  } else {
    manualCarousel.value?.startAutoPlay()
  }
  isAutoPlaying.value = !isAutoPlaying.value
}
</script>

<style scoped>
.demo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 40px;
}

.demo-section h2 {
  margin-bottom: 16px;
  color: #333;
}

.manual-controls {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.manual-controls button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.manual-controls button:hover {
  background: #0056b3;
}
</style>
